<template>
    <scroll-view @scrolltolower="handleToLower" class="album" scroll-y>
        <!-- swiper默认高度为150px并不会被内容撑开 -->
        <!-- 这里图片的高度为240px 宽度默认为320px -->
        <!-- 计算图片的宽高比例 ，把比例放到swiper中去 -->
        <!-- swiper开始部分 -->
       <view class="swiper_box">
           <!-- 指示器  indicator-dots -->
           <!-- 衔接滑动 circular -->
           <!-- 自动切换 autoplay -->
           <!-- 自动切换时间间隔 -->
           <swiper indicator-dots autoplay circular>
               <swiper-item
               v-for="item in banner"
               :key="item.id"
               >
                   <image mode="widthFix" :src="item.thumb"></image>
               </swiper-item>
           </swiper>
       </view>
        <!-- swiper结束部分 -->
        <view class="album_list">
            <navigator class="album_item" 
            v-for="item in album"
            :key="item.id"
            :url="`/pages/album/index?id=${item.id}`"
            >
                <view class="album_img">
                    <image mode="aspectFill"  :src="item.cover"></image>
                </view>
                <view class="presen">
                    <view class="presen_title">{{item.name}}</view>
                    <view class="presen_desc">{{item.desc}}</view>
                    <view class="presen_btn">
                        <view class="btn">按钮</view>
                    </view>
                </view>
            </navigator>
        </view>
    </scroll-view>
</template>

<script>
export default {
    data(){
        return {
            params:{
                // 获取数据的条数
                limit:30,
                //关键字
                order:"new",
                // 跳过多少条
                skip:0
            },
            banner:[],
            album:[],
            hide:true
        }
    },
    mounted(){
        // 修改页面标题
        uni.setNavigationBarTitle({title:"专辑"})
        // 请求数据
        this.getList()
    },
    methods:{
        getList(){
            this.request({
                url:"http://157.122.54.189:9088/image/v1/wallpaper/album",
                data:this.params
            })
            .then(result=>{
                console.log(result)
             
                // 避免每次更新专辑重复请求banner
                if(this.banner.length===0){
                // 轮播图
                this.banner=result.res.banner
                }
                 // 当没有专辑列表时
                if(result.res.album.length===0){
                    this.hide=false
                      uni.showToast({
               title: '没有可加载内容',
               icon: 'none',
                });
                    return
                }
                // 获取专辑列表
                this.album=[...this.album,...result.res.album]
            })
        },
        handleToLower(){
            if(this.hide){
            this.params.skip+=this.params.limit
            this.getList()
            }else{
                uni.showToast({
                    title: '没有更多内容了',
                    icon: 'none',
                });
            }
          
        }
    }
}
</script>

<style lang="scss">
.album{
    height:calc( 100vh - 46px );
}
   .swiper_box{
       swiper{
           height:calc( 750rpx / 2.3 );
          swiper-item{
          image{
              height:100%;
          }
          } 
       }
   }
.album_list {
  .album_item {
      display:flex;
      justify-content: space-between;
      padding:10rpx;
      border-bottom:1px solid #cccccc;
    .album_img {
        flex:2;
        padding:0 10rpx;
      image {
        width: 200rpx;
        height:200rpx;
      }
    }

    .presen {
       flex:4;
       overflow: hidden;
      .presen_title {
        color:black;
        font-weight: 550;
        font-size:30rpx;
        padding:10rpx 0;
      }

      .presen_desc {
       color:#888888;
       padding:10rpx 0;
       font-size:24rpx;

       text-overflow: ellipsis;
       overflow: hidden;
       white-space:nowrap;
      }

      .presen_btn {
          padding:10rpx;
          display:flex;
          justify-content: flex-end;
        .btn {
          color:$color;
          border:1rpx solid $color;
          padding:10rpx;
        }
      }
    }
  }
}
</style>